<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <meta name="twitter:site" content="@metroui">
    <meta name="twitter:creator" content="@pimenov_sergey">
    <meta name="twitter:card" content="summary">
    <meta name="twitter:title" content="Metro 4 Components Library">
    <meta name="twitter:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins  .">
    <meta name="twitter:image" content="https://metroui.org.ua/images/m4-logo-social.png">

    <meta property="og:url" content="https://metroui.org.ua/v4/index.html">
    <meta property="og:title" content="Metro 4 Components Library">
    <meta property="og:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins  .">
    <meta property="og:type" content="website">
    <meta property="og:image" content="https://metroui.org.ua/images/m4-logo-social.png">
    <meta property="og:image:secure_url" content="https://metroui.org.ua/images/m4-logo-social.png">
    <meta property="og:image:type" content="image/png">
    <meta property="og:image:width" content="968">
    <meta property="og:image:height" content="504">

    <meta name="author" content="Sergey Pimenov">
    <meta name="description" content="Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, five default responsive tiers, Less variables and mixins, and dozens of predefined classes.">
    <meta name="keywords" content="HTML, CSS, JS, Metro, CSS3, Javascript, HTML5, UI, Library, Web, Development, Framework">

    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="icon" href="favicon.ico" type="image/x-icon">

    <link href="metro/css/metro-all.css?ver=@@b-version" rel="stylesheet">
    <link href="highlight/styles/github.css" rel="stylesheet">
    <link href="docsearch/docsearch.min.css" rel="stylesheet">
    <link href="css/site.css" rel="stylesheet">

    <title>Grid system - Metro 4 :: Popular HTML, CSS and JS library</title>
</head>
<body class="m4-cloak">

<header data-role="html-container" data-insert-mode="replace" data-html-source="header.html"></header>

<div data-role="html-container" data-insert-mode="replace" data-html-source="sidebar-menu.html"></div>

<div class="container-fluid docs-content">

    <div class="row flex-xl-nowrap">

            <div class="d-none d-block-xl cell-xl-2 order-2 border-left bd-light toc-wrapper">
                <h5>Table of contents</h5>
                <hr/>
                <ul class="toc-nav">
                    <li class="toc-entry"><a href="#">Grid system</a></li>
                    <li class="toc-entry"><a href="#_grid_about">About</a></li>
                    <li class="toc-entry"><a href="#_how_it_works">How it works</a></li>
                    <li class="toc-entry"><a href="#_colspan">Colspan</a></li>
                    <li class="toc-entry"><a href="#_offset">Offset</a></li>
                    <li class="toc-entry"><a href="#_media_columns">Media columns</a></li>
                    <li class="toc-entry"><a href="#_gaps">Gaps</a></li>
                    <li class="toc-entry"><a href="#_stub_column">Stub column</a></li>
                    <li class="toc-entry"><a href="#_ordering">Ordering</a></li>
                    <li class="toc-entry"><a href="#_nested_rows">Nested rows</a></li>
                    <li class="toc-entry"><a href="#_alignment">Alignment columns</a></li>
                    <li>
                        <ul>
                            <li class="toc-entry"><a href="#_alignment_columns_v">Vertical</a></li>
                            <li class="toc-entry"><a href="#_alignment_columns_h">Horizontal</a></li>
                        </ul>
                    </li>
                </ul>

            </div>

            <main class="cell-xl-10 order-1 pr-1-sx pl-1-sx pr-5-md pl-5-md">
                <div class="place-right d-none d-block-lg" style="width: 200px;">
                    <img src="images/logo.png" class="w-100" alt="">
                </div>

                <h1 id="_grid_system">Grid system</h1>

                <p class="text-leader">
                    Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, five default responsive tiers, Less variables and mixins, and dozens of predefined classes.
                </p>

                <!-- ads-html -->

                <h3 id="_grid_about">About</h3>
                <p>
                    Metro 4 grid system uses a series of containers, rows, and columns to layout and align content.
                </p>

                <div class="container-fluid p-5 border border-4 bd-grayWhite mt-3 mb-3 d-none d-block-md">
                    <div class="grid demo-grid">
                        <div class="row">
                            <div class="cell"><div>1</div></div>
                            <div class="cell"><div>2</div></div>
                            <div class="cell"><div>3</div></div>
                            <div class="cell"><div>4</div></div>
                            <div class="cell"><div>5</div></div>
                            <div class="cell"><div>6</div></div>
                            <div class="cell"><div>7</div></div>
                            <div class="cell"><div>8</div></div>
                            <div class="cell"><div>9</div></div>
                            <div class="cell"><div>10</div></div>
                            <div class="cell"><div>11</div></div>
                            <div class="cell"><div>12</div></div>
                        </div>
                        <div class="row">
                            <div class="cell-3"><div>cell-3</div></div>
                            <div class="cell-3"><div>cell-3</div></div>
                            <div class="cell-3"><div>cell-3</div></div>
                            <div class="cell-3"><div>cell-3</div></div>
                        </div>
                        <div class="row">
                            <div class="cell-4 offset-4"><div>cell-4 + offset-4</div></div>
                        </div>
                        <div class="row">
                            <div class="cell-3"><div>cell-3</div></div>
                            <div class="cell-6 offset-3"><div>cell-6 + offset-3</div></div>
                        </div>
                        <div class="row">
                            <div class="cell-4 offset-4"><div>cell-4 + offset-4</div></div>
                            <div class="cell"><div>1</div></div>
                            <div class="cell"><div>1</div></div>
                            <div class="cell"><div>1</div></div>
                            <div class="cell"><div>1</div></div>
                        </div>
                        <div class="row">
                            <div class="cell">
                                <div class="row">
                                    <div class="cell"><div>nested</div></div>
                                    <div class="cell"><div>nested</div></div>
                                    <div class="cell"><div>nested</div></div>
                                    <div class="cell"><div>nested</div></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <pre><code class="html">
                    &lt;div class="grid"&gt;
                        &lt;div class="row"&gt;
                            &lt;div class="cell"&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;
                            &lt;div class="cell"&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;
                            &lt;div class="cell"&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;
                            &lt;div class="cell"&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;
                            &lt;div class="cell"&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;
                            &lt;div class="cell"&gt;&lt;div&gt;6&lt;/div&gt;&lt;/div&gt;
                            &lt;div class="cell"&gt;&lt;div&gt;7&lt;/div&gt;&lt;/div&gt;
                            &lt;div class="cell"&gt;&lt;div&gt;8&lt;/div&gt;&lt;/div&gt;
                            &lt;div class="cell"&gt;&lt;div&gt;9&lt;/div&gt;&lt;/div&gt;
                            &lt;div class="cell"&gt;&lt;div&gt;10&lt;/div&gt;&lt;/div&gt;
                            &lt;div class="cell"&gt;&lt;div&gt;11&lt;/div&gt;&lt;/div&gt;
                            &lt;div class="cell"&gt;&lt;div&gt;12&lt;/div&gt;&lt;/div&gt;
                        &lt;/div&gt;
                        &lt;div class="row"&gt;
                            &lt;div class="cell-3"&gt;&lt;div&gt;cell-3&lt;/div&gt;&lt;/div&gt;
                            &lt;div class="cell-3"&gt;&lt;div&gt;cell-3&lt;/div&gt;&lt;/div&gt;
                            &lt;div class="cell-3"&gt;&lt;div&gt;cell-3&lt;/div&gt;&lt;/div&gt;
                            &lt;div class="cell-3"&gt;&lt;div&gt;cell-3&lt;/div&gt;&lt;/div&gt;
                        &lt;/div&gt;
                        &lt;div class="row"&gt;
                            &lt;div class="cell-4 offset-4"&gt;&lt;div&gt;cell-4 + offset-4&lt;/div&gt;&lt;/div&gt;
                        &lt;/div&gt;
                        &lt;div class="row"&gt;
                            &lt;div class="cell-3"&gt;&lt;div&gt;cell-3&lt;/div&gt;&lt;/div&gt;
                            &lt;div class="cell-6 offset-3"&gt;&lt;div&gt;cell-6 + offset-3&lt;/div&gt;&lt;/div&gt;
                        &lt;/div&gt;
                        &lt;div class="row"&gt;
                            &lt;div class="cell-4 offset-4"&gt;&lt;div&gt;cell-4 + offset-4&lt;/div&gt;&lt;/div&gt;
                            &lt;div class="cell"&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;
                            &lt;div class="cell"&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;
                            &lt;div class="cell"&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;
                            &lt;div class="cell"&gt;&lt;div&gt;1&lt;/div&gt;&lt;/div&gt;
                        &lt;/div&gt;
                        &lt;div class="row"&gt;
                            &lt;div class="cell"&gt;
                                &lt;div class="row"&gt;
                                    &lt;div class="cell"&gt;&lt;div&gt;nested&lt;/div&gt;&lt;/div&gt;
                                    &lt;div class="cell"&gt;&lt;div&gt;nested&lt;/div&gt;&lt;/div&gt;
                                    &lt;div class="cell"&gt;&lt;div&gt;nested&lt;/div&gt;&lt;/div&gt;
                                    &lt;div class="cell"&gt;&lt;div&gt;nested&lt;/div&gt;&lt;/div&gt;
                                &lt;/div&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                </code></pre>

                <h3 id="_how_it_works">How it works</h3>

                <p>
                    Metro 4 grid system uses a series of containers, rows, and columns to layout and align content. It’s built with flexbox and is fully responsive. Below is an example and an in-depth look at how the grid comes together.
                </p>

                <div class="container-fluid p-5 border border-4 bd-grayWhite mt-3 mb-3 demo-grid">
                    <div class="row">
                        <div class="cell-sm"><div>One of three columns</div></div>
                        <div class="cell-sm"><div>One of three columns</div></div>
                        <div class="cell-sm"><div>One of three columns</div></div>
                    </div>
                </div>

                <p>
                    The above example creates three equal-width columns on small, medium, large, and extra large devices using our predefined grid classes.
                    Those columns are centered in the page with the parent <code>.container</code>.
                </p>

                <p>
                    Breaking it down, here’s how it works:
                </p>

                <ul>
                    <li>Containers provide a means to center your site’s contents. Use <code>.container</code> for fixed width or <code>.container-fluid</code> for full width.</li>
                    <li>User rows grouping with <code>.grid</code> container</li>
                    <li>Rows are horizontal groups of columns that ensure your columns are lined up properly. We use the negative margin method on <span class="tally">.row</span> to ensure all your content is aligned properly down the left side.</li>
                    <li>Content should be placed within columns, and only columns may be immediate children of rows.</li>
                    <li>Grid columns without a set width will automatically layout with equal widths. For example, four instances of <span class="tally">.cell-sm</span> will each automatically be <span class="tally">25%</span> wide for small breakpoints.</li>
                    <li>Column classes indicate the number of columns you’d like to use out of the possible 12 per row. So, if you want three equal-width columns, you can use <span class="tally">.cell-sm-4</span>.</li>
                    <li>Column widths are set in percentiles, so they’re always fluid and sized relative to their parent element.</li>
                    <li>Columns have horizontal padding to create the gutters between individual columns, however, you can remove the margin from rows and padding from columns with <span class="tally">.no-gap</span> on the <span class="tally">.row</span> or on the <span class="tally">.grid</span> for all rows in a grid.</li>
                    <li>There are five grid tiers, one for each <a href="#">responsive breakpoint</a>: small (sm), medium (md), large (lg), extra large (xl) and ultra large (xxl).</li>
                    <li>Grid tiers are based on minimum widths, meaning they apply to that one tier and all those above it (e.g., <span class="tally">.cell-md-4</span> applies to medium, large, extra large and ultra large devices).</li>
                    <li>You can use predefined grid classes for more semantic markup.</li>
                </ul>

                <pre class=""><code>
                    &lt;!-- Grouping rows --&gt;
                    &lt;div class="grid"&gt;
                        &lt;div class="row"&gt;
                            &lt;div class="cell"&gt;&lt;/div&gt;
                            ...
                            &lt;div class="cell"&gt;&lt;/div&gt;
                        &lt;/div&gt;
                        ...
                        &lt;div class="row"&gt;
                            &lt;div class="cell"&gt;&lt;/div&gt;
                            ...
                            &lt;div class="cell"&gt;&lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;

                    &lt;!-- Single row --&gt;
                    &lt;div class="row"&gt;
                        &lt;div class="cell"&gt;&lt;/div&gt;
                        ...
                        &lt;div class="cell"&gt;&lt;/div&gt;
                    &lt;/div&gt;

                    &lt;!-- Nested row --&gt;
                    &lt;div class="row"&gt;
                        &lt;div class="cell"&gt;
                            &lt;div class="row"&gt;
                                &lt;div class="cell"&gt;&lt;/div&gt;
                                ...
                                &lt;div class="cell"&gt;&lt;/div&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                </code></pre>

                <h3 id="_colspan">Colspan</h3>

                <p>
                    If you need to combine columns, there are appropriate classes for this: <span class="tally">.cell-1</span> through <span class="tally">.cell-12</span> and specific media offsets <span class="tally">.cell-*-1</span> through <span class="tally">.cell-*-12</span>.
                </p>

                <div class="container-fluid p-5 border border-4 bd-grayWhite mt-3 mb-3 d-none d-block-md">
                    <div class="grid demo-grid">
                        <div class="row">
                            <div class="cell colspan-1"><div>1</div></div>
                            <div class="cell"><div>1</div></div>
                            <div class="cell"><div>1</div></div>
                            <div class="cell"><div>1</div></div>
                            <div class="cell"><div>1</div></div>
                            <div class="cell"><div>1</div></div>
                            <div class="cell"><div>1</div></div>
                            <div class="cell"><div>1</div></div>
                            <div class="cell"><div>1</div></div>
                            <div class="cell"><div>1</div></div>
                            <div class="cell"><div>1</div></div>
                            <div class="cell"><div>1</div></div>
                        </div>
                        <div class="row">
                            <div class="cell colspan-2"><div>colspan2</div></div>
                            <div class="cell"><div>1</div></div>
                            <div class="cell"><div>1</div></div>
                            <div class="cell"><div>1</div></div>
                            <div class="cell"><div>1</div></div>
                            <div class="cell"><div>1</div></div>
                            <div class="cell"><div>1</div></div>
                            <div class="cell"><div>1</div></div>
                            <div class="cell"><div>1</div></div>
                            <div class="cell"><div>1</div></div>
                            <div class="cell"><div>1</div></div>
                        </div>
                        <div class="row">
                            <div class="cell colspan-3"><div>colspan3</div></div>
                            <div class="cell"><div>1</div></div>
                            <div class="cell"><div>1</div></div>
                            <div class="cell"><div>1</div></div>
                            <div class="cell"><div>1</div></div>
                            <div class="cell"><div>1</div></div>
                            <div class="cell"><div>1</div></div>
                            <div class="cell"><div>1</div></div>
                            <div class="cell"><div>1</div></div>
                            <div class="cell"><div>1</div></div>
                        </div>
                        <div class="row">
                            <div class="cell colspan-4"><div>colspan4</div></div>
                            <div class="cell"><div>1</div></div>
                            <div class="cell"><div>1</div></div>
                            <div class="cell"><div>1</div></div>
                            <div class="cell"><div>1</div></div>
                            <div class="cell"><div>1</div></div>
                            <div class="cell"><div>1</div></div>
                            <div class="cell"><div>1</div></div>
                            <div class="cell"><div>1</div></div>
                        </div>
                    </div>
                </div>

                <pre class=""><code>
                    &lt;div class="row"&gt;
                        &lt;div class="cell-4"&gt;&lt;/div&gt;
                        &lt;div class="cell-4"&gt;&lt;/div&gt;
                        &lt;div class="cell-4"&gt;&lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div class="row"&gt;
                        &lt;div class="colspan-4"&gt;&lt;/div&gt;
                        &lt;div class="colspan-4"&gt;&lt;/div&gt;
                        &lt;div class="colspan-4"&gt;&lt;/div&gt;
                    &lt;/div&gt;
                </code></pre>

                <h3 id="_offset">Offset</h3>

                <p>
                    If you need to shift the column, there are appropriate classes for this: <span class="tally">.offset-1</span> through <span class="tally">.offset-12</span> and specific media offsets <span class="tally">.offset-*-1</span> through <span class="tally">.offset-*-12</span>.
                </p>

                <div class="container-fluid p-5 border border-4 bd-grayWhite mt-3 mb-3 d-none d-block-md">
                    <div class="grid demo-grid">
                        <div class="row">
                            <div class="cell"><div>1</div></div>
                            <div class="cell"><div>1</div></div>
                            <div class="cell"><div>1</div></div>
                            <div class="cell"><div>1</div></div>
                            <div class="cell"><div>1</div></div>
                            <div class="cell"><div>1</div></div>
                            <div class="cell"><div>1</div></div>
                            <div class="cell"><div>1</div></div>
                            <div class="cell"><div>1</div></div>
                            <div class="cell"><div>1</div></div>
                            <div class="cell"><div>1</div></div>
                            <div class="cell"><div>1</div></div>
                        </div>
                        <div class="row">
                            <div class="cell offset-1"><div>offset1</div></div>
                        </div>
                        <div class="row">
                            <div class="cell offset-2"><div>offset2</div></div>
                        </div>
                        <div class="row">
                            <div class="cell offset-3"><div>offset3</div></div>
                        </div>
                    </div>
                </div>

                <pre class=""><code>
                    &lt;div class="row"&gt;
                        &lt;div class="cell offset-1"&gt;&lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div class="row"&gt;
                        &lt;div class="cell offset-2"&gt;&lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div class="row"&gt;
                        &lt;div class="cell offset-3"&gt;&lt;/div&gt;
                    &lt;/div&gt;
                </code></pre>

                <!-- ads-html -->

                <h3 id="_media_columns">Media columns</h3>

                <p>
                    There are five grid tiers, one for each <a href="#">responsive breakpoint</a>: small (sm), medium (md), large (lg), extra large (xl) and ultra large (xxl).
                </p>

                <table class="table cell-border table-border cell-media-table">
                    <thead>
                    <tr>
                        <td style="width: 200px">Breakpoints</td>
                        <td>min-width</td>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td class="bg-light">sm</td>
                        <td>576px</td>
                    </tr>
                    <tr>
                        <td class="bg-light">md</td>
                        <td>768px</td>
                    </tr>
                    <tr>
                        <td class="bg-light">lg</td>
                        <td>992px</td>
                    </tr>
                    <tr>
                        <td class="bg-light">xl</td>
                        <td>1200px</td>
                    </tr>
                    <tr>
                        <td class="bg-light">xxl</td>
                        <td>1452px</td>
                    </tr>
                    </tbody>
                </table>

                <p>
                    You can use predefined grid classes for more semantic markup.
                </p>

                <table class="table cell-border table-border cell-media-table">
                    <thead>
                    <tr>
                        <td style="width: 200px">Target</td>
                        <td>Media</td>
                        <td class="d-none d-block-md">Example</td>
                    </tr>
                    </thead>

                    <tbody>
                    <tr>
                        <td style="width: 200px" class="bg-light">colspan</td>
                        <td>cell-@-*</td>
                        <td class="d-none d-block-md">cell-md-3</td>
                    </tr>
                    <tr>
                        <td class="bg-light">offset</td>
                        <td>offset-@-*</td>
                        <td class="d-none d-block-md">offset-md-3</td>
                    </tr>
                    <tr>
                        <td class="bg-light">ordering</td>
                        <td>order-@-*</td>
                        <td class="d-none d-block-md">order-md-3</td>
                    </tr>
                    <tr>
                        <td class="bg-light">width auto</td>
                        <td>cell-@-auto</td>
                        <td class="d-none d-block-md">cell-md-auto</td>
                    </tr>
                    <tr>
                        <td class="bg-light">width 100%</td>
                        <td>cell-@-full</td>
                        <td class="d-none d-block-md">cell-md-full</td>
                    </tr>
                    <tr>
                        <td class="bg-light">width 100%</td>
                        <td>cell-@</td>
                        <td class="d-none d-block-md">cell-md</td>
                    </tr>
                    <tr>
                        <td class="bg-light">width 25%</td>
                        <td>cell-@-quarter</td>
                        <td class="d-none d-block-md">cell-md-quarter</td>
                    </tr>
                    <tr>
                        <td class="bg-light">width 50%</td>
                        <td>cell-@-half</td>
                        <td class="d-none d-block-md">cell-md-half</td>
                    </tr>
                    <tr>
                        <td class="bg-light">width 1/3</td>
                        <td>cell-@-one-third</td>
                        <td class="d-none d-block-md">cell-md-one-third</td>
                    </tr>
                    <tr>
                        <td class="bg-light">width 2/3</td>
                        <td>cell-@-two-third</td>
                        <td class="d-none d-block-md">cell-md-two-third</td>
                    </tr>
                    </tbody>
                </table>

                <div class="container-fluid p-5 border border-4 bd-grayWhite mt-3 mb-3 d-none d-block-md">
                    <div class="grid demo-grid">
                        <div class="row">
                            <div class="cell-sm-full cell-md-one-third cell-lg-3"><div>1</div></div>
                            <div class="cell-sm-full cell-md-two-third cell-lg-3"><div>1</div></div>
                            <div class="cell-sm-full cell-md-half cell-lg-3"><div>1</div></div>
                            <div class="cell-sm-full cell-md-half cell-lg-3"><div>1</div></div>
                        </div>
                    </div>
                </div>

                <pre class=""><code>
                    &lt;div class="row"&gt;
                        &lt;div class="cell-sm-full cell-md-one-third cell-lg-3"&gt;&lt;/div&gt;
                        &lt;div class="cell-sm-full cell-md-two-third cell-lg-3"&gt;&lt;/div&gt;
                        &lt;div class="cell-sm-full cell-md-half cell-lg-3"&gt;&lt;/div&gt;
                        &lt;div class="cell-sm-full cell-md-half cell-lg-3"&gt;&lt;/div&gt;
                    &lt;/div&gt;
                </code></pre>

                <h3 id="_gaps">Gaps</h3>

                <p>
                    The gaps between columns in our predefined grid classes can be removed with <span class="tally">.no-gap</span>. This removes the negative margins from <span class="tally">.row</span> and the horizontal padding from all immediate children columns.
                </p>

                <div class="container-fluid p-5 border border-4 bd-grayWhite mt-3 mb-3 d-none d-block-md">

                    <h5>With gaps</h5>
                    <div class="grid demo-grid gaps-demo">
                        <div class="row">
                            <div class="cell"><div>1</div></div>
                            <div class="cell"><div>1</div></div>
                            <div class="cell"><div>1</div></div>
                            <div class="cell"><div>1</div></div>
                            <div class="cell"><div>1</div></div>
                            <div class="cell"><div>1</div></div>
                            <div class="cell"><div>1</div></div>
                            <div class="cell"><div>1</div></div>
                            <div class="cell"><div>1</div></div>
                            <div class="cell"><div>1</div></div>
                            <div class="cell"><div>1</div></div>
                            <div class="cell"><div>1</div></div>
                        </div>
                        <div class="row">
                            <div class="cell colspan-2"><div>1</div></div>
                            <div class="cell"><div>1</div></div>
                            <div class="cell"><div>1</div></div>
                            <div class="cell"><div>1</div></div>
                            <div class="cell"><div>1</div></div>
                            <div class="cell"><div>1</div></div>
                            <div class="cell"><div>1</div></div>
                            <div class="cell"><div>1</div></div>
                            <div class="cell"><div>1</div></div>
                            <div class="cell"><div>1</div></div>
                            <div class="cell"><div>1</div></div>
                        </div>
                        <div class="row">
                            <div class="cell colspan-4"><div>1</div></div>
                            <div class="cell colspan-4"><div>1</div></div>
                            <div class="cell colspan-4"><div>1</div></div>
                        </div>
                    </div>


                    <h5>No gaps</h5>
                    <div class="grid no-gap demo-grid gaps-demo">
                        <div class="row">
                            <div class="cell"><div>1</div></div>
                            <div class="cell"><div>1</div></div>
                            <div class="cell"><div>1</div></div>
                            <div class="cell"><div>1</div></div>
                            <div class="cell"><div>1</div></div>
                            <div class="cell"><div>1</div></div>
                            <div class="cell"><div>1</div></div>
                            <div class="cell"><div>1</div></div>
                            <div class="cell"><div>1</div></div>
                            <div class="cell"><div>1</div></div>
                            <div class="cell"><div>1</div></div>
                            <div class="cell"><div>1</div></div>
                        </div>
                        <div class="row">
                            <div class="cell colspan-2"><div>1</div></div>
                            <div class="cell"><div>1</div></div>
                            <div class="cell"><div>1</div></div>
                            <div class="cell"><div>1</div></div>
                            <div class="cell"><div>1</div></div>
                            <div class="cell"><div>1</div></div>
                            <div class="cell"><div>1</div></div>
                            <div class="cell"><div>1</div></div>
                            <div class="cell"><div>1</div></div>
                            <div class="cell"><div>1</div></div>
                            <div class="cell"><div>1</div></div>
                        </div>
                        <div class="row">
                            <div class="cell colspan-4"><div>1</div></div>
                            <div class="cell colspan-4"><div>1</div></div>
                            <div class="cell colspan-4"><div>1</div></div>
                        </div>
                    </div>
                </div>

                <pre class=""><code>
                    &lt;div class="grid no-gap"&gt;...&lt;/div&gt;
                    &lt;div class="row no-gap"&gt;...&lt;/div&gt;
                </code></pre>

                <h3 id="_stub_column">Stub column</h3>

                <p>
                    With class <span class="tally">.stub</span> you can create column with fixed width.
                </p>

                <div class="container-fluid p-5 border border-4 bd-grayWhite mt-3 mb-3 d-none d-block-md">
                    <div class="grid demo-grid">
                        <div class="row">
                            <div class="stub" style="width: 300px"><div>Stub column</div></div>
                            <div class="cell"><div>1</div></div>
                        </div>
                    </div>
                </div>

                <pre class=""><code>
                    &lt;div class="row"&gt;
                        &lt;div class="stub" style="width: 300px"&gt;&lt;/div&gt;
                        &lt;div class="cell"&gt;&lt;/div&gt;
                    &lt;/div&gt;
                </code></pre>

                <h3 id="_ordering">Ordering</h3>
                <p>
                    You can use classes <span class="tally">.order-*</span> to set order columns.
                </p>

                <div class="container-fluid p-5 border border-4 bd-grayWhite mt-3 mb-3 d-none d-block-md">
                    <div class="grid demo-grid">
                        <div class="row">
                            <div class="cell order-2"><div>Order 2</div></div>
                            <div class="cell order-1"><div>Order 1</div></div>
                        </div>
                    </div>
                </div>

                <pre class=""><code>
                    &lt;div class="row"&gt;
                        &lt;div class="cell order-2"&gt;Order 2&lt;/div&gt;
                        &lt;div class="cell order-1"&gt;Order 1&lt;/div&gt;
                    &lt;/div&gt;
                </code></pre>

                <h3 id="_nested_rows">Nested rows</h3>
                <p>
                    Metro 4 supports nested rows.
                </p>
                <div class="container-fluid p-5 border border-4 bd-grayWhite mt-3 mb-3 d-none d-block-md">
                    <div class="grid demo-grid">
                        <div class="row">
                            <div class="cell"><div>Cell 1</div></div>
                            <div class="cell"><div>Cell 2</div></div>
                            <div class="cell"><div>Cell 2</div></div>
                            <div class="cell"><div>Cell 3</div></div>
                        </div>
                        <div class="row">
                            <div class="cell">
                                <div class="row">
                                    <div class="cell"><div>Nested row</div></div>
                                    <div class="cell">
                                        <div class="row">
                                            <div class="cell"><div>Nested row</div></div>
                                            <div class="cell"><div>Nested row</div></div>
                                            <div class="cell"><div>Nested row</div></div>
                                        </div>
                                        <div class="row">
                                            <div class="cell"><div>Nested row</div></div>
                                            <div class="cell"><div>Nested row</div></div>
                                            <div class="cell"><div>Nested row</div></div>
                                        </div>
                                    </div>
                                    <div class="cell"><div>Nested row</div></div>
                                </div>
                                <div class="row">
                                    <div class="cell">
                                        <div class="row">
                                            <div class="cell"><div>Nested row</div></div>
                                            <div class="cell"><div>Nested row</div></div>
                                            <div class="cell"><div>Nested row</div></div>
                                        </div>
                                        <div class="row">
                                            <div class="cell"><div>Nested row</div></div>
                                            <div class="cell"><div>Nested row</div></div>
                                            <div class="cell"><div>Nested row</div></div>
                                        </div>
                                        <div class="row">
                                            <div class="cell"><div>Nested row</div></div>
                                            <div class="cell"><div>Nested row</div></div>
                                            <div class="cell"><div>Nested row</div></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <pre class=""><code>
                    &lt;div class="row"&gt;
                        &lt;div class="cell"&gt;
                            &lt;div class="row"&gt;
                                &lt;div class="cell"&gt;&lt;/div&gt;
                                ...
                                &lt;div class="cell"&gt;&lt;/div&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                </code></pre>

                <h3 id="_alignment">Alignment columns</h3>
                <p>
                    To vertical and horizontal align column you can use flexbox alignment utilities classes.
                </p>

                <h4 id="_alignment_columns_v">Vertical alignment</h4>
                <p>
                    For vertical alignment all cells in a row:
                        <span class="tally">.flex-align-start</span>,
                        <span class="tally">.flex-align-end</span>,
                        <span class="tally">.flex-align-center</span>,
                        <span class="tally">.flex-align-stretch</span>,
                        <span class="tally">.flex-align-baseline</span>,
                </p>
                <p>
                    For vertical alignment self cell in a row:
                        <span class="tally">.flex-align-self-start</span>,
                        <span class="tally">.flex-align-self-end</span>,
                        <span class="tally">.flex-align-self-center</span>,
                        <span class="tally">.flex-align-self-stretch</span>,
                        <span class="tally">.flex-align-self-baseline</span>,
                </p>
                <div class="container-fluid p-5 border border-4 bd-grayWhite mt-3 mb-3 d-none d-block-md demo-grid">
                    <div class="row flex-align-start bg-light" style="height: 10rem;">
                        <div class="cell"><div>cell</div></div>
                        <div class="cell"><div>cell</div></div>
                        <div class="cell"><div>cell</div></div>
                    </div>
                    <br/>
                    <div class="row flex-align-center bg-light" style="height: 10rem;">
                        <div class="cell"><div>cell</div></div>
                        <div class="cell"><div>cell</div></div>
                        <div class="cell"><div>cell</div></div>
                    </div>
                    <br />
                    <div class="row flex-align-end bg-light" style="height: 10rem;">
                        <div class="cell"><div>cell</div></div>
                        <div class="cell"><div>cell</div></div>
                        <div class="cell"><div>cell</div></div>
                    </div>
                </div>

                <pre class=""><code>
                    &lt;div class="row flex-align-start"&gt;
                        &lt;div class="cell"&gt;&lt;/div&gt;
                        &lt;div class="cell"&gt;&lt;/div&gt;
                        &lt;div class="cell"&gt;&lt;/div&gt;
                    &lt;/div&gt;
                    &lt;br/&gt;
                    &lt;div class="row flex-align-center"&gt;
                        &lt;div class="cell"&gt;&lt;/div&gt;
                        &lt;div class="cell"&gt;&lt;/div&gt;
                        &lt;div class="cell"&gt;&lt;/div&gt;
                    &lt;/div&gt;
                    &lt;br /&gt;
                    &lt;div class="row flex-align-end"&gt;
                        &lt;div class="cell"&gt;&lt;/div&gt;
                        &lt;div class="cell"&gt;&lt;/div&gt;
                        &lt;div class="cell"&gt;&lt;/div&gt;
                    &lt;/div&gt;
                </code></pre>

                <div class="container-fluid p-5 border border-4 bd-grayWhite mt-3 mb-3 d-none d-block-md demo-grid">
                    <div class="row bg-light" style="height: 10rem;">
                        <div class="cell flex-align-self-start"><div>start</div></div>
                        <div class="cell flex-align-self-center"><div>center</div></div>
                        <div class="cell flex-align-self-end"><div>end</div></div>
                    </div>
                </div>

                <pre class=""><code>
                    &lt;div class="row"&gt;
                        &lt;div class="cell flex-align-self-start"&gt;&lt;/div&gt;
                        &lt;div class="cell flex-align-self-center"&gt;&lt;/div&gt;
                        &lt;div class="cell flex-align-self-end"&gt;&lt;/div&gt;
                    &lt;/div&gt;
                </code></pre>

                <h4 id="_alignment_columns_h">Horizontal alignment</h4>
                <p>
                    For horizontal alignment cells in a row:
                    <span class="tally">.flex-justify-start</span>,
                    <span class="tally">.flex-justify-end</span>,
                    <span class="tally">.flex-justify-center</span>,
                    <span class="tally">.flex-justify-between</span>,
                    <span class="tally">.flex-justify-around</span>,
                </p>
                <div class="container-fluid p-5 border border-4 bd-grayWhite mt-3 mb-3 d-none d-block-md demo-grid">
                    <div class="row bg-light flex-justify-start">
                        <div class="cell-4">cell</div>
                        <div class="cell-4">cell</div>
                    </div>
                    <br />
                    <div class="row bg-light flex-justify-center">
                        <div class="cell-4">cell</div>
                        <div class="cell-4">cell</div>
                    </div>
                    <br />
                    <div class="row bg-light flex-justify-end">
                        <div class="cell-4">cell</div>
                        <div class="cell-4">cell</div>
                    </div>
                    <br />
                    <div class="row bg-light flex-justify-around">
                        <div class="cell-4">cell</div>
                        <div class="cell-4">cell</div>
                    </div>
                    <br/>
                    <div class="row bg-light flex-justify-between">
                        <div class="cell-4">cell</div>
                        <div class="cell-4">cell</div>
                    </div>
                </div>
                <p>
                    Also you can use media alignment classes such as <span class="tally">.flex-align-start-*</span>, <span class="tally">.flex-justify-start-*</span> where asterisk is responsive breakpoint (sm, md, lg, xl, xxl)
                </p>

            </main>
        </div>
    </div>

    <script src="docsearch/docsearch.min.js"></script>


    <script src="metro/js/metro.js?ver=@@b-version"></script>
    <script src="highlight/highlight.pack.js"></script>
    <script src="js/clipboard.min.js"></script>
    <script src="js/site.js"></script>
    <!-- ads-script -->
    <!-- ga-script -->
    <!-- hit-ua -->
</body>
</html>